<template>
  <div class="content-area">
    <div class="content-header">
      <h1>历史COSMIC记录</h1>
    </div>
    <div class="table-wrapper">
      <n-data-table
        :columns="historyColumns"
        :data="historyData"
        :pagination="pagination"
        :loading="loading"
        striped
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, h } from 'vue';
import { useMessage } from 'naive-ui';

const message = useMessage();
const loading = ref(false);

// 历史记录表格列定义
const historyColumns = [
  {
    title: '需求名称',
    key: 'requirementName',
    width: 200,
  },
  {
    title: '功能点个数',
    key: 'functionPointCount',
    width: 120,
  },
  {
    title: '创建日期',
    key: 'createDate',
    width: 150,
  },
  {
    title: '状态',
    key: 'status',
    width: 100,
    render(row) {
      return h(
        'n-tag',
        {
          type: row.status === '已完成' ? 'success' : 'warning',
        },
        row.status
      );
    },
  },
  {
    title: '操作',
    key: 'actions',
    width: 150,
    render(row) {
      return h('n-space', {}, [
        h(
          'n-button',
          {
            size: 'small',
            type: 'primary',
            onClick: () => downloadFile(row),
          },
          '下载'
        ),
        h(
          'n-button',
          {
            size: 'small',
            type: 'error',
            onClick: () => deleteRecord(row),
          },
          '删除'
        ),
      ]);
    },
  },
];

// 历史记录数据
const historyData = ref([
  {
    id: 1,
    requirementName: '用户管理系统需求',
    functionPointCount: 25,
    createDate: '2024-01-15',
    status: '已完成',
  },
  {
    id: 2,
    requirementName: '订单处理系统需求',
    functionPointCount: 18,
    createDate: '2024-01-20',
    status: '进行中',
  },
]);

// 分页配置
const pagination = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 50],
  onChange: (page) => {
    pagination.page = page;
  },
  onUpdatePageSize: (pageSize) => {
    pagination.pageSize = pageSize;
    pagination.page = 1;
  },
});

const downloadFile = (row) => {
  message.info(`下载 ${row.requirementName} 的COSMIC文件`);
};

const deleteRecord = (row) => {
  message.warning(`删除 ${row.requirementName} 的记录`);
};
</script>

<style scoped>
.content-area {
  max-width: 1200px;
  margin: 0 auto;
}

.content-header {
  text-align: center;
  margin-bottom: 3rem;
}

.content-header h1 {
  font-size: 2.5rem;
  font-weight: 300;
  color: #ff00ff;
  text-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
  margin: 0;
}

.table-wrapper {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 2rem;
  backdrop-filter: blur(10px);
  max-width: 800px;
  margin: 0 auto;
}
</style>